import $ from 'jquery'
import './css/app.less'

/**
 * 加载更多
 */
export default class LoadMore {
    constructor(options) {
        this.loading = false;
        this.firstLoad = true;

        let opt = {
            loadMore: function () {},
            page: 0
        }
        this.options = $.extend({}, opt, options);

        let _this = this;

        // 点击加载更多数据
        $(document).on('click', '.xLoadMore', function (e) {
            // 点击开始加载更多数据
            _this.loading = true;
            // 显示加载更多的动画效果
            $(".xLoadMore").remove();
            _this.options.el.append(`<div class="load_spinner">
                <div class="load_bounce1"></div>
                <div class="load_bounce2"></div>
                <div class="load_bounce3"></div>
            </div>`);


            // 通知界面
            _this.options.page++;
            _this.options.loadMore.call(_this, e, _this.options.page);
        })
    }

    /**
     * 第一次加载数据
     * @param {Boolean} haveMore 
     */
    _loadFristPage(elStr, haveMore = false) {
        if (haveMore) {
            this.options.el[0].innerHTML = (elStr);
            this.options.el.append('<p class="xLoadMore">加载更多</p>');
        } else {
            this.options.el[0].innerHTML = (elStr);
        }
    }

    /**
     * 加载更多
     * @param {Boolean} haveMore 
     */
    _loadMorePage(elStr, haveMore = false) {

        if (haveMore) {
            $(".xLoadMore").remove();
            this.options.el.append(elStr);
            this.options.el.append('<p class="xLoadMore">加载更多</p>');
        } else {
            this.options.el.append(elStr);
        }

    }

    /**
     * 设置为第一次加载
     */
    setFirstLoad() {
        this.firstLoad = true;
    }

    /**
     * 渲染页面
     */
    render(elStr, haveMore = false, loading = false) {
        if (this.options.el) {
            if (this.firstLoad) { // 第一次不做动画
                this.firstLoad = false;
                this._loadFristPage(elStr, haveMore);
            } else {
                this.loading = loading;
                $(".load_spinner").remove();
                this._loadMorePage(elStr, haveMore);
            }
        } else {
            throw Error("请设置节点 {el:'节点'} ")
        }

    }
}